<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1_1-HTMLCanvasElement的方法</title>
</head>

<body>
    <!-- 相关API列表
        https://www.canvasapi.cn/HTMLCanvasElement/getContext
        了解HTMLCanvasElement.getContext
        了解HTMLCanvasElement.toBlob
        了解HTMLCanvasElement.toDataURL
    -->

    <input type="file" name="file" id="file">
    <canvas id="canvas" width="150" height="150"></canvas>
    <script>
        /** @type {HTMLInputElement} */
        var canvas = document.getElementById('canvas')
        var ctx = canvas.getContext('2d')

        var file = document.getElementById('file')
        file.onchange = (e) => {
            const file = e.target.files[0]
            const rd = new FileReader()
            rd.onload = () => {
                console.log(rd.result)
                const img = new Image()
                img.src = rd.result
                img.onload = () => {
                    ctx.drawImage(img, 10, 10)
                    canvas.toBlob((blob) => {
                        var url = URL.createObjectURL(blob);
                        console.log('url', url)
                    })
                    console.log('canvas.toDataURL', canvas.toDataURL())
                }
            }
            rd.readAsDataURL(file)
        }



    </script>
</body>

</html>